<template>
	<view>
		<cu-custom :bgLiner="true" :isBlack="false">
			<block slot="content">发票详情</block>
		</cu-custom>
		<view class="top-head white fontBold" :style="{top:CustomBar+'px'}">
			已开票 ￥{{info.total_price}}
		</view>
		<view style="height: 102rpx;"></view>
		<view class="contents">
			<view class="flex align-center position-rel">
				<view class="top-tip">
					共{{list.length}}张
				</view>
				<image :src="list[0]" class="top-img" v-if="list.length" @click="preImg(list,0)"></image>
				<view  class="top-img" v-else></view>
			</view>
			<view class="m-t-10">
				<view class="flex justify-space-between align-center p-t-5 p-b-5" v-for="(item,index) in txtList" :key="index">
					<view class="fontBold f-15">
						{{item.name}}
					</view>
					<view class="black-9 f-15">
						{{item.txt}}
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				txtList:[
					{name:'发票类型',txt:'',field:'invoice_type'},//发票类型 1普通发票 2专用发票
					{name:'发票内容',txt:'',field:'type_content'},//发票内容 1商品明细 2商品类别
					{name:'抬头类型',txt:'',field:'type_look_up'},//抬头类型 1个人 2组织
					{name:'抬头名称',txt:'',field:'look_up_name'},
					{name:'开票金额',txt:'',field:'total_price'},
					{name:'开票时间',txt:'',field:'invoicing_time'},
					{name:'申请时间',txt:'',field:'apply_time'},
					// {name:'收票方式',txt:'',field:''}
				],
				list:[],
				info:{},
				id:0,
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id;
				this.getInfo();
			}
		},
		methods: {
			preImg(urls,current){
				uni.previewImage({
					urls,
					current
				})
			},
			getInfo(){
				let data = {
					id:this.id
				}
				this.$http('/apicloud/Order/invoiceInfo',data).then(res=>{
					if(res.code == 200){
						let datas = res.data;
						this.info = datas.info;
						this.list = this.info.invoice_url?this.info.invoice_url.split(','):[];
						this.txtList.forEach(item=>{
							if(item.field=='invoice_type'){
								item.txt = this.info.invoice_type==2?'专用发票':'普通发票';
							}else if(item.field=='type_content'){
								item.txt = this.info.type_content==2?'商品类别':'商品明细';
							}else if(item.field=='type_look_up'){
								item.txt = this.info.type_look_up==2?'单位':'个人';
							}else if(item.field=='invoicing_time'){
								item.txt = this.info.invoicing_time?this.$util.timestampToTime(this.info.invoicing_time,3):'';
							}else if(item.field=='apply_time'){
								item.txt = this.info.apply_time?this.$util.timestampToTime(this.info.apply_time,3):'';
							}else{
								item.txt = this.info[item.field]?this.info[item.field]:'';
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.top-head{
		position: fixed;
		background: #ff5200;
		padding: 20rpx 30rpx;
		left: 0;
		width: 100%;
		height: 102rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 0 0 30rpx 30rpx;
		z-index: 23;
	}
	.top-img{
		width: 100%;
		height: 460rpx;
		border-radius: 16rpx;
	}
	.top-tip{
		font-size: 32rpx;
		color: #ffffff;
		font-weight: bold;
		width: 100%;
		height: 60rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		border-radius: 0 0 16rpx 16rpx;
		background: rgba(0, 0, 0, .4);
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
